<template>
  <el-dialog v-draggable title="添加" :modal="false" :close-on-click-modal="false" :visible.sync="dialogVisible"
    width="50vw">
    <div class="title-container">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input v-model="searchModel.workModelName" placeholder="请输入工作流名称" @clear="searchClick" clearable
              prefix-icon="el-icon-search" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <common-table @handleSelectionChange="handleSelectionChange" selection :tableHeight="'300'" show-index show-check-box
      v-loading="tableLoading" :columns="twoColumns" :list="twoList">
    </common-table>
    <pagination class="pagination" :total="twoCount" :page.sync="twoPage.pageIndex" :limit.sync="twoPage.pageSize"
      @pagination="twoPagination" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="saveWork" type="primary">保存</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>


  </el-dialog>
</template>

<script>
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
import { queryMyWorkModelPage, insertBApplicationToWorkModel } from "@/api/businessScenario/index"

export default {
  props: {
    dialogVis: {
      type: Boolean,
      default: () => false
    },
    applicationCode: {
      type: String
    }
  },
  components: {
    CommonTable
  },

  data () {
    return {
      tableLoading: false,
      searchModel: {
        workModelName: ""
      },
      twoColumns: [
        {
          title: "工作流模型名称",
          prop: "workModelName",
          align: "center"
        },
        {
          title: "工作流模型版本号",
          prop: "workModelVersion",
          align: "center"
        },
        {
          title: "工作流模型类型",
          prop: "workModelType",
          align: "center"
        }
      ],
      twoList: [],
      twoPage: {
        pageSize: 10,
        pageIndex: 1
      },
      twoCount: 0,
      activeList: []
    }
  },
  created () {
  },
  mounted () {
    this.getTwoTableLIst()
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.dialogVis
      },
      set: function (v) {
        this.$emit("update:dialogVis", v)
      }
    }
  },
  methods: {
    twoPagination (pageItem) {
      this.twoPage.pageIndex = pageItem.page
      this.twoPage.pageSize = pageItem.limit
      this.getTwoTableLIst()
    },
    async getTwoTableLIst () {
      // this.tableLoading = true
      const { workModelName } = this.searchModel
      const { status, success, object, message } = await queryMyWorkModelPage({ ...this.twoPage, workModelName })
      if (status == "200") {
        this.twoList = object.data
        this.twoCount = object.count
        // this.tableLoading = false
      }
    },
    searchClick () {
      // this.searchModel.workModelName = ""
      this.getTwoTableLIst()
    },
    handleSelectionChange (data) {
      this.activeList = data
    },
    async saveWork () {
      let messages = this.activeList.map((v) => v.workModelCode).join("&")
      const { status, success, object, message } = await insertBApplicationToWorkModel({
        messages,
        applicationCode: this.applicationCode
      })
      if (status == "200") {
        this.dialogVisible = false
        this.$message({
          type: "success",
          message: message
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}
</style>

